<template>
  <transition name="scale-fade">
    <div class="f_r_b_c">
      <span class="label">性别</span>
      <div class="f_r_a_c fl2">
        <gender-com
          v-for="gender in genders"
          :key="gender.code"
          :data="gender"
          @click="chooseGender"
        ></gender-com>
      </div>
    </div>
  </transition>
</template>

<script>
import genderCom from './Gender.vue'
export default {
  name: 'genderGroup',
  components: {
    genderCom
  },
  props: {
    genders: {
      type: Array,
      default: () => [
        {
          code: 1,
          value: 1,
          text: '男',
          status: 1
        },
        {
          code: 2,
          value: 2,
          text: '女',
          status: 0
        }
      ]
    }
  },
  data () {
    return {}
  },
  computed: {},
  methods: {
    chooseGender: function (gender) {
      this.genders.map(item => {
        if (item.code == gender.code) {
          item.status = 1
          this.$emit('click', item)
        } else {
          item.status = 0
        }
        return item
      })
    }
  },
  created () {},
  mounted () {},
  destroyed () {}
}
</script>
<style lang="scss" scoped>
.label {
  margin: 10px 0;
  font-size: 28px;
  color: #333333;
}
</style>
